import { Input, Modal } from 'antd';
import React, { Component } from 'react';

export default class ModalBox extends Component {
  state = {
    visible: false,
    videoUrl: ''
  };

  handleCancel = () => {
    this.setState({ visible: false });
  };

  handleClick = () => {
    console.log('改变VideoUrl', this.state.videoUrl);
    window.pubSubInstance.publish('video.url.result', this.state.videoUrl);

    this.setState({ visible: false });
    // const layer = this.props.h5ds.getLayer();
    // console.log(this.props, JSON.parse(JSON.stringify(layer)));
  };

  onChangeText = e => {
    this.setState({ videoUrl: e.target.value });
  };

  componentDidMount() {
    if (!window.pubSubInstance) {
      window.pubSubInstance = new window.PubSub();
    }
    window.pubSubInstance.subscribe('video.show.modal', () => {
      this.setState({ visible: true });
    });
    window.pubSubInstance.subscribe('video.hide.modal', () => {
      this.setState({ visible: false });
    });
  }

  componentWillUnmount() {
    window.pubSubInstance.unsubscribe('video.show.modal');
    window.pubSubInstance.unsubscribe('video.hide.modal');
  }

  render() {
    const { TextArea } = Input;
    return (
      <Modal title="视频Url设置" visible={this.state.visible} onOk={this.handleClick} onCancel={this.handleCancel}>
        <div className="h5ds-video-url-input">
          <TextArea value={this.state.videoUrl} onChange={this.onChangeText} rows={3} placeholder="添加视频资源Url" />
        </div>
      </Modal>
    );
  }
}
